<template>
  <van-popup
    style="width: 100%; height: 100%"
    class="pop_top"
    teleport="body"
    position="top"
    v-model:show="show"
  >
    <div class="wrapper">
      <div class="block">
        <div class="title_head theme_color light_border_bottom">
          <i class="iconfont icon-guanbi icon_back" @click="show = false"></i>
        </div>
        <div class="set_content">
          <div class="set_box" @click="goToPage('userList')">
            <div class="set_title" >{{ t("passport") }}</div>
            <div class="set_value" >
              <i class="iconfont icon-ic_right language_icon"></i>
            </div>
          </div>
          <div class="set_box" @click="goToPage('orderList')">
            <div class="set_title" >{{ t("orderList") }}</div>
            <div class="set_value" >
              <i class="iconfont icon-ic_right language_icon"></i>
            </div>
          </div>

           <div class="set_box" @click="goToPage('donateList')">
            <div class="set_title" >{{ t("donateList") }}</div>
            <div class="set_value" >
              <i class="iconfont icon-ic_right language_icon"></i>
            </div>
          </div>
          <div class="set_box" @click="goToPage('myCommunity')">
            <div class="set_title" >{{ t("myCommunity") }}</div>
            <div class="set_value" >
              <i class="iconfont icon-ic_right language_icon"></i>
            </div>
          </div>
          
          <div v-if="store.state.isAdmin">

            <div class="admin_entry" > {{t('adminEntry')}}</div>
                 <div class="set_box" @click="goToPage('allUserList')">
            <div class="set_title" >{{ t("allUserList") }}</div>
            <div class="set_value" >
              <i class="iconfont icon-ic_right language_icon"></i>
            </div>
          </div>

          <div class="set_box" @click="goToPage('allOrderList')">
            <div class="set_title" >{{ t("allOrderList") }}</div>
            <div class="set_value" >
              <i class="iconfont icon-ic_right language_icon"></i>
            </div>
          </div>
              <div class="set_box" @click="goToPage('allDonateList')">
            <div class="set_title" >{{ t("donateAllList") }}</div>
            <div class="set_value" >
              <i class="iconfont icon-ic_right language_icon"></i>
            </div>
          </div>

          </div>

          
        </div>
      </div>
    </div>
  </van-popup>
</template>
<script setup>
import { useStore } from "vuex";
import { ref, onMounted, computed, reactive } from "vue";
import { useI18n } from "vue-i18n";
import { changeTheme, isDark } from "@/hooks/init.js";
import { currencyList } from "@/utils/currency.js";
import { useRouter } from "vue-router";
const { locale, t } = useI18n();
const store = useStore();
const router = useRouter();
const emit = defineEmits(["change", "update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const goToPage = (value) => {
  show.value = false
  router.push({
    name: value,
  });
};
let show = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
const showLanguageDialog = ref(false);
</script>
<style>
.van-popup--center {
  max-width: 10rem;
}
</style>
<style lang="scss" scoped>
:deep .van-cell__title{
  font-weight: bold;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  .block {
    position: relative;
    max-width: 10rem;
    width: 100%;
    box-sizing: border-box;
    .title_head {
      height: 40px;
      text-align: center;
      display: flex;
      max-width: 10rem;
      width: 100%;
      align-items: center;
      justify-content: center;
      position: sticky;
      top: 0;
      font-size: 12px;
      z-index: 7;

      .titleClass {
        font-size: 14px;
        font-weight: bold;
        font-family: "微软雅黑";
      }

      .left_icon {
        position: absolute;
        z-index: 50;
        right: 10px;
        top: 14px;
        font-size: 16px;
        display: flex;
        align-items: center;

        img {
          height: 16px;
        }
      }

      .icon_back {
        position: absolute;
        z-index: 50;
        right: 10px;
        top: 12px;
        color: var(--van-popup-close-icon-color);
        font-size: 18px;
        display: flex;
        align-items: center;

        .back {
          font-size: 0.32px;
          margin-left: 5px;
        }
      }
    }
    .com_box{
      padding: 16px 0;
    }
    .set_content {
      padding: 16px;
      border-top: 1px solid #eee;
    }
    .set_box {
      display: flex;
      font-size: 11px;
      font-weight: bold;
      margin-bottom: 16px;
      justify-content: space-between;
      .set_title {
      }
      .set_value {
        display: flex;
        align-items: center;
        .language_icon {
          font-size: 14px;
        }
        .theme_class {
          display: flex;
          align-items: center;
          margin-right: 2px;

          .light {
            margin-right: 5px;
            font-size: 16px;
          }

          .dark {
            margin-right: 5px;
            font-size: 20px;
          }
        }
      }
    }
  }
}
.pop_top {
  top: 44px !important;
  overflow: hidden;
  transform: translateY(0);
}
.admin_entry{
  margin: 10px 0 15px 0;
}
.van-popup {
  z-index: 9;
}
</style>
